<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar bg-primary my-header">
        <h2 class="my-header-tittle text-center">中介系统</h2>
        <h5 class="text-center">所得税法上的基本多少粉丝服务方违反地方是的覅我访问速度电视服务覅威锋网呢</h5>
    </nav>
    <div class="col-sm-offset-1 col-sm-10" style="margin-bottom: 48px">
        <div class="base col-sm-12" style="margin-top: 3px">
            <div class="col-sm-4 text-muted" >
                <div style="padding: 10px;">
                  <span>当前时间：</span>
                  <span class="time" id="timeShow"></span>
                </div>
            </div>
            <div class="col-sm-8 text-right">
                <form class="form-inline">
                    <div class="input-group">
                        <div class="input-group-addon">机构</div>
                        <input type="text" class="form-control" placeholder="机构">
                    </div>
                    <button class="btn btn-info">查询</button>
                    <a class="btn btn-default" onclick="showLogin()">登录</a>
                    <a class="btn btn-default" onclick="showRegister()">注册</a>
                    <span>欢迎您，<span class="text-danger">sb</span>&emsp;<i class="glyphicon glyphicon-log-out"></i></span>
                </form>
            </div>
        </div>
        <div class="content1 col-sm-12">
            <div class="notice col-sm-4">
                <div class="top text-primary col-sm-12" style="box-shadow: 2px 2px 5px #bfbebe; padding-left: 0; height: 33px; line-height: 29px;background: #e9f4fc;">
                    <div class="col-sm-3 my-active"><span class="my-color-black" style="padding: 0;">公告</span></div>
                    <span class="col-sm-offset-6 col-sm-3 text-right my-color-more">更多</span>
                </div>
                <ul class="list-unstyled list-group col-sm-12" style="padding-right: 0; height: 290px; box-shadow: 2px 2px 5px #bfbebe">
                    <li class="col-sm-12 list-group-item" style="border: none">
                        <a>
                            <span class="my-ellipsis col-sm-10">[收撒大所]&emsp;速度大师傅的说法威武飞凤飞飞多少粉丝纷纷热情气温气温的vere额热翁</span>
                        </a>
                        <span class="col-sm-1">[05/18]</span>
                    </li>
                    <li class="col-sm-12 list-group-item" style="border: none">
                        <a>
                            <span class="my-ellipsis col-sm-10">[收撒大所]&emsp;速度大师傅的说法威武飞凤飞飞多少粉丝纷纷热情气温气温的vere额热翁</span>
                        </a>
                        <span class="col-sm-1">[05/18]</span>
                    </li>
                </ul>
            </div>
            <div class="type col-sm-4" style="box-shadow: 2px 2px 5px #bfbebe; padding-left: 0;padding-right: 0;">
                <div class="top text-primary col-sm-12" style="padding-left: 0;height: 33px; line-height: 29px; background: #e9f4fc;">
                    <span class="col-sm-4 my-active my-color-black">中介类型</span>
                </div>
                <div class="col-sm-12" style="padding-left: 15px;height: 290px">
                    <div class="col-sm-12">
                        <div class="col-sm-4 type-image-title">
                            <a href="">
                                <img src="990.jpg" class="img-responsive img-rounded"/>
                                <p class="text-center my-ellipsis my-breakword my-img-title" title="中介类型中介类型中介类型中介类型中介类型中介类型中介类型">中介类型中介类型中介类型中介类型中介类型中介类型中介类型</p>
                            </a>
                        </div>
                        <div class="col-sm-4 type-image-title">
                            <a href="">
                                <img src="990.jpg" class="img-responsive img-rounded"/>
                                <p class="text-center my-ellipsis my-breakword my-img-title" title="中介类型中介类型中介类型中介类型中介类型中介类型中介类型">中介类型中介类型中介类型中介类型中介类型中介类型中介类型</p>
                            </a>
                        </div>
                        <div class="col-sm-4 type-image-title">
                            <a href="">
                                <img src="990.jpg" class="img-responsive img-rounded"/>
                                <p class="text-center my-ellipsis my-breakword my-img-title" title="中介类型中介类型中介类型中介类型中介类型中介类型中介类型">中介类型中介类型中介类型中介类型中介类型中介类型中介类型</p>
                            </a>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="col-sm-4 type-image-title">
                            <a href="">
                                <img src="990.jpg" class="img-responsive img-rounded"/>
                                <p class="text-center my-ellipsis my-breakword my-img-title" title="中介类型中介类型中介类型中介类型中介类型中介类型中介类型">中介类型中介类型中介类型中介类型中介类型中介类型中介类型</p>
                            </a>
                        </div>
                        <div class="col-sm-4 type-image-title">
                            <a href="">
                                <img src="990.jpg" class="img-responsive img-rounded"/>
                                <p class="text-center my-ellipsis my-breakword my-img-title" title="中介类型中介类型中介类型中介类型中介类型中介类型中介类型">中介类型中介类型中介类型中介类型中介类型中介类型中介类型</p>
                            </a>
                        </div>
                        <div class="col-sm-4 type-image-title">
                            <a href="">
                                <img src="990.jpg" class="img-responsive img-rounded"/>
                                <p class="text-center my-ellipsis my-breakword my-img-title" title="中介类型中介类型中介类型中介类型中介类型中介类型中介类型">中介类型中介类型中介类型中介类型中介类型中介类型中介类型</p>
                            </a>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="col-sm-4 type-image-title">
                            <a href="">
                                <img src="990.jpg" class="img-responsive img-rounded"/>
                                <p class="text-center my-ellipsis my-breakword my-img-title" title="中介类型中介类型中介类型中介类型中介类型中介类型中介类型">中介类型中介类型中介类型中介类型中介类型中介类型中介类型</p>
                            </a>
                        </div>
                        <div class="col-sm-4 type-image-title">
                            <a href="">
                                <img src="990.jpg" class="img-responsive img-rounded"/>
                                <p class="text-center my-ellipsis my-breakword my-img-title" title="中介类型中介类型中介类型中介类型中介类型中介类型中介类型">中介类型中介类型中介类型中介类型中介类型中介类型中介类型</p>
                            </a>
                        </div>
                        <div class="col-sm-4 type-image-title">
                            <a href="">
                                <img src="990.jpg" class="img-responsive img-rounded"/>
                                <p class="text-center my-ellipsis my-breakword my-img-title" title="中介类型中介类型中介类型中介类型中介类型中介类型中介类型">中介类型中介类型中介类型中介类型中介类型中介类型中介类型</p>
                            </a>
                        </div>
                    </div>
                    <div class="col-sm-offset-5 col-sm-4 text-center" style="width: 50px;background-color: yellow;position: relative;top: -2px;padding: 5px 0px;" onclick="showMoreType()">
                        <i class="glyphicon glyphicon-menu-down" style="position: relative;left: 18px;top: 5px"></i>
                        <i class="glyphicon glyphicon-menu-down"></i>
                        <i class="glyphicon glyphicon-menu-down" style="position: relative;right: 18px;top: -3px"></i>
                    </div>
                </div>
            </div>
            <div class="supervision col-sm-4">
                <div class="top text-primary col-sm-12" style="box-shadow: 2px 2px 5px #bfbebe; background: #e9f4fc;height: 33px; line-height: 29px;">
                    <span class="col-sm-4 my-color-black">监督评价</span>
                    <span class="col-sm-offset-5 col-sm-3 text-right my-color-more">更多</span>
                </div>
                <div class="col-sm-12" style="box-shadow: 2px 2px 5px #bfbebe;">
                    <div class="col-sm-12">
                        <a class="col-sm-6 text-center my-active text-danger" data-type="0" onclick="changeSuper(this)">信用评价</a>
                        <a class="col-sm-6 text-center my-color-black" data-type="1" onclick="changeSuper(this)">不良记录</a>
                    </div>
                    <div class="supervision-content" style="height: 290px">
                        <ul class="list-unstyled list-group col-sm-12" id="credit-rating" style="padding: 0;">
                            <li class="list-group-item" style="border: none">
                                <span class="col-sm-6 my-ellipsis text-left" style="padding: 0;"><a href="">打发第三方威风威风的方法</a></span>
                                <span class="col-sm-6 text-right" style="padding: 0;">
                                    <i class="glyphicon glyphicon-star my-star"></i>
                                    <i class="glyphicon glyphicon-star my-star"></i>
                                    <i class="glyphicon glyphicon-star my-star"></i>
                                    <i class="glyphicon glyphicon-star my-star"></i>
                                    <i class="glyphicon glyphicon-star-empty my-star">
                                        <i class="glyphicon glyphicon-star my-star glyphicon-decimal" style="width: 50%;"></i>
                                    </i>
                                    <span>(4.5)</span>
                                </span>
                            </li>
                        </ul>
                        <ul class="list-unstyled list-group col-sm-12" id="bad-record" style="padding: 0;display: none">
                            <li class="list-group-item" style="border: none">
                                <span class="col-sm-7 my-ellipsis text-left" style="padding: 0;"><a href="">打发第三方威风威风的方法</a></span>
                                <span class="col-sm-5 my-ellipsis text-right" style="padding: 0;"><span class="text-danger">1</span>次不良记录</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="content2" style="margin: 0 30px">
            <div class="top col-sm-12 text-primary" style="padding-left: 0; height: 33px; line-height: 29px; background: #e9f4fc;box-shadow: 2px 2px 5px #bfbebe;">
                <span class="col-sm-2 my-active"><span class="my-color-black" style="padding: 0;">中选结果</span></span>
                <span class="col-sm-offset-9 col-sm-1 my-color-more">更多</span>
            </div>
            <ul class="col-sm-12 list-group" style="padding-right: 0;min-height: 257px;box-shadow: 2px 2px 5px #bfbebe">
                <li class="list-group-item" style="border: none">
                    <a>
                        <span class="col-sm-8 text-left">[收撒大所]&emsp;速度大师傅的说法威武飞凤飞飞多少粉丝纷纷热情气温气温的vere额热翁</span>
                        <span class="col-sm-3 text-left">速度大师傅的说法威武</span>
                    </a>
                    <span class="col-sm-1">[05/18]</span>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-sm-12 w100 my-footer">
        <div class="text-center">
            <a>关于我们</a> <a>投诉与建议</a>
        </div>
    </div>
    <div id="modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">登录</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="username" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="username" placeholder="用户名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="password" placeholder="密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-10 col-sm-2">
                                <button class="btn btn-default" data-dismiss="modal">登录</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="regModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">注册</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="regusername" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="regusername" placeholder="用户名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="regpassword" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="regpassword" placeholder="密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="regrepassword" class="col-sm-2 control-label">确认密码</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="regrepassword" placeholder="确认密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="regauthCode" class="col-sm-2 control-label">验证码</label>
                            <div class="col-sm-6">
                                <input type="text" id="regauthCode" class="form-control" placeholder="验证码">
                            </div>
                            <div class="col-sm-4">
                                <img src="1923.jpg" alt="验证码" class="img-responsive img-rounded">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-10 col-sm-2">
                                <button class="btn btn-default" data-dismiss="modal">注册</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="typeModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">中介类型</h4>
                </div>
                <div class="modal-body">
                    <table class="table">
                        <tbody>
                            <tr>
                                <td style="border: none">
                                    <a href="">
                                        <div style="width: 108px">
                                            <img src="990.jpg" class="img-responsive img-rounded"/>
                                            <p class="text-center my-ellipsis my-breakword my-img-title" title="中介类型中介类型中介类型中介类型中介类型">中介类型中介类型中介类型中介类型中介类型</p>
                                        </div>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td style="border: none">
                                    <a href="">
                                        <div style="width: 108px">
                                            <img src="990.jpg" class="img-responsive img-rounded"/>
                                            <p class="text-center my-ellipsis my-breakword my-img-title" title="中介类型中介类型中介类型中介类型中介类型">中介类型中介类型中介类型中介类型中介类型</p>
                                        </div>
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script>
        function showLogin() {
            $('#modal').modal('show');
        }
        function showRegister() {
            $('#regModal').modal('show');
        }
        function showMoreType() {
            $('#typeModal').modal('show');
        }
        function changeSuper(obj) {
            $(obj).addClass('my-active').siblings().removeClass('my-active');
            if($(obj).data('type')) {
                $("#credit-rating").css({display: 'none'});
                $("#bad-record").css({display: 'block'});
            } else {
                $("#credit-rating").css({display: 'block'});
                $("#bad-record").css({display: 'none'});
            }
        }
        var t = setTimeout(time, 1000);
        function time () {
            clearTimeout(t);
            var dt = new Date();
            var year = dt.getFullYear();
            var month = dt.getMonth();
            var day = dt.getDate();
            var h = dt.getHours() > 9 ? dt.getHours() : '0' + dt.getHours();
            var m = dt.getMinutes() > 9 ? dt.getMinutes() : '0' + dt.getMinutes();
            var s = dt.getSeconds() > 9 ? dt.getSeconds() : '0' + dt.getSeconds();
            document.getElementById('timeShow').innerHTML = year + '年' + month + '月' + day + '日 ' + h + ':' + m + ':' + s;
            t = setTimeout(time, 1000);
        }
    </script>
</body>
</html>
